import React from 'react';
import { Card, Row, Col, Spin } from 'antd';
import Statistic from './components/statistic';
import ZpqkChart from './components/echart/ZpqkChart';
import CbxlChart from './components/echart/CbxlChart';
import ZpfxCard from './components/zpfxCard';
import Sjxlfx from './Sjxlfx';
import Qdxlfx from './Qdxlfx';
import useRecruitment from '../../hooks/useRecruitment';

const Analyse = ({ companyId }) => {
    const [loading, data = []] = useRecruitment({ companyId });
    // 数据对应值顺序：报告周期，招聘完成情况，成本效率分析,时间效率分析,渠道效率分析
    const {
        reportPeriod,
        hrRecruitDoneVO = {},
        hrRecruitCostEfficiencyVO = {},
        hrRecruitTimeEfficiencyVO = {},
        hrRecruitChannelEfficiencyVO = {}
    } = data;
    const { doneRate = '--', targetNum = '--', entryNum = '--', unDoneNum = '--', stepDataList = [] } = hrRecruitDoneVO;
    const {
        entryCandidateRatio = '--',
        industryReferenceValue = '--',
        stepDataList: stepList
    } = hrRecruitCostEfficiencyVO;
    return (
        <Card title="上季度招聘复盘" style={{ marginTop: 12 }} bordered={false}>
            <Spin spinning={loading}>
                <Row gutter={24}>
                    <Col lg={{ span: 16 }} sm={{ span: 24 }}>
                        <Row>
                            <Col span={12}>
                                <Statistic
                                    title={<span>{reportPeriod}招聘完成情况</span>}
                                    data={{
                                        top: '已完成',
                                        center: <strong>{doneRate}%</strong>,
                                        bottom: (
                                            <span>
                                                目标{targetNum}人，已入职{entryNum}人，未完成{unDoneNum}人
                                            </span>
                                        )
                                    }}
                                />
                                <ZpqkChart data={stepDataList} />
                            </Col>
                            <Col span={12}>
                                <Statistic
                                    title="成本效率分析"
                                    data={{
                                        top: '入职/候选人比例',
                                        center: (
                                            <strong>{entryCandidateRatio === '' ? '--' : entryCandidateRatio}</strong>
                                        ),
                                        bottom: (
                                            <span>
                                                业界参考值：
                                                {industryReferenceValue === '' ? '--' : industryReferenceValue}
                                            </span>
                                        )
                                    }}
                                />
                                <CbxlChart data={stepList} />
                            </Col>
                        </Row>
                    </Col>
                    <Col lg={{ span: 8 }} sm={{ span: 24 }}>
                        <ZpfxCard data={hrRecruitCostEfficiencyVO} />
                    </Col>
                </Row>
                <Row gutter={24} style={{ marginTop: '24px' }}>
                    <Col span={12}>
                        <Sjxlfx data={hrRecruitTimeEfficiencyVO} />
                    </Col>
                    <Col span={12}>
                        <Qdxlfx data={hrRecruitChannelEfficiencyVO} />
                    </Col>
                </Row>
            </Spin>
        </Card>
    );
};

export default Analyse;
